<template>
  <view class="w100p common_wrap no-bg">
    <CommonHeader title="在线求助" :is-right="true">
      <template slot="right">
        <view class="filter-w" @click="onFilter">
          <image src="/static/caigou/filter.png" mode="scaleToFill" />
          <text>{{$t('筛选')}}</text>
        </view>
      </template>
    </CommonHeader>
    <view class="w100p pr list_block">
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="w100p scroll-Y"
        refresher-enabled="true"
        @scrolltolower="lower"
        @refresherrefresh="fresh"
        refresher-background="transparent"
        :refresher-triggered="isRefresher"
        @refresherrestore="store"
        @touchmove.stop
      >
        <view class="list-wrap">
          <view
            class="list"
            v-for="(item, index) in infoList"
            :key="index"
            @click="onTranslate(item)"
          >
            <view class="img">
              <image :src="item.avatar" mode="aspectFill"></image>
              <view :class="{ circle: true, red: item.status != 1 }"></view>
            </view>
            <view class="right-section">
              <view class="top-name">
                <view class="namx">
                  <image :src="countryImg(item)" />
                  <view class="name ellipsis_one">{{
                    item.name || $t('暂无')
                  }}</view>
                </view>
                <view class="start">
                  <uni-rate
                    :value="item.rating"
                    size="24rpx"
                    margin="8"
                    activeColor="#FF981A"
                    color="#DBDBDB"
                  />
                </view>
              </view>
              <view class="service-rpice">
                <view class="txt"
                  >{{$t('服务价格')}}：{{ item.intention_score }}{{$t('积分')}}/分钟</view
                >
                <view class="location">
                  <image src="/static/caigou/location.png" />
                  <text>{{ get(item, "city_arr.shortname") }}</text>
                </view>
              </view>
            </view>
          </view>
          <u-empty
            text="暂无数据"
            text-size="28"
            v-if="infoList.length === 0"
          />
        </view>
        <view style="height: 16rpx"></view>
      </scroll-view>
    </view>

    <!-- 在线求助 -->
    <Modal :show.sync="isShowFilter" title="在线求助">
      <div class="w-full-xx" style="height: 80vh; background-color: #f5f5f5">
        <scroll-view scroll-y class="scroll-v">
          <view class="lists-wrapper">
            <!-- 能力 -->
            <view class="box-same">
              <view class="inp-li">
                <view class="title"
                  >{{$t('语言能力')}}<text class="sub">（{{$t('可多选')}}）</text></view
                >
                <view class="select-mutil">
                  <view
                    :class="{ selecli: true, active: item.select }"
                    v-for="(item, index) in lagugeList"
                    :key="index"
                    @click="onLanguge(item)"
                  >
                    {{ item.title }}
                  </view>
                </view>
              </view>
              <view class="inp-li">
                <view class="title"
                  >{{$t('专业方向')}}<text class="sub">（{{$t('可多选')}}）</text></view
                >
                <view class="select-mutil">
                  <view
                    :class="{ selecli: true, active: item.select }"
                    v-for="(item, index) in jobList"
                    :key="index"
                    @click="onZhuanye(item)"
                  >
                    {{ item.name }}
                  </view>
                </view>
              </view>
              <view class="inp-li">
                <view class="title"
                  >{{$t('价格选择')}}<text class="sub">（{{$t('积分')}}/分钟）</text></view
                >
                <view class="select-mutil">
                  <view
                    :class="{ selecli: true, active: currentJIfen === index }"
                    v-for="(item, index) in pointList"
                    :key="index"
                    @click="onPrice(index)"
                  >
                    {{ item }}
                  </view>
                </view>
              </view>
              <view class="inp-li">
                <view class="title"
                  >{{$t('国籍选择')}}<text class="sub">（{{$t('可多选')}}）</text></view
                >
                <view class="select-mutil">
                  <view
                    :class="{ selecli: true, active: item.select }"
                    v-for="(item, index) in nationalList"
                    :key="index"
                    @click="onContry(item)"
                  >
                    {{ item.name }}
                  </view>
                </view>
              </view>
            </view>
            <view class="box-same" style="padding-bottom: 0">
              <view class="inp-li">
                <city
                  @change="onCHangeHotArea"
                  is_all="true"
                  :value="fullBeginAddressKeyArea"
                >
                  <view
                    class="inp"
                    style="background: #fff; padding-left: 0; padding-right: 0"
                  >
                    <view :class="{ txt: true, active: true }"
                      >{{ fullBeginAddressArea || $t('地区选择') }}
                    </view>
                    <view class="aroow">
                      <image src="/static/caigou/xiala.png" />
                    </view>
                  </view>
                </city>
              </view>
            </view>

            <view style="height: 16rpx"></view>
          </view>
        </scroll-view>

        <!-- 取消 -->
        <view class="btn-wrap" @click="submit">
          <view class="btn green">{{$t('确定')}}</view>
        </view>
      </div>
    </Modal>

    <!-- 在线问询选择翻译 -->
    <view v-if="isShowPoint">
      <u-popup :show="isShowPoint" @close="onClose" round="34">
        <view class="pop-wrapper">
          <view class="headerxx">
            <image src="/static/caigou/chacha.png" @click="onClose" />
          </view>

          <view class="translate-wrapper">
            <view class="base-toubu">
              <image :src="currentInfo.avatar" mode="aspectFill" />
              <text>{{ currentInfo.name }}</text>
            </view>
            <view class="pink-w">
              <view class="li">
                <view class="txt">{{$t('服务价格')}}：</view>
                <view class="desc"
                  >{{ currentInfo.intention_score }}{{$t('积分')}}/分钟</view
                >
              </view>
              <view class="li">
                <view class="txt">{{$t('语言选择')}}：</view>
                <view class="desc">
                  {{ currentInfo.request_lang }}
                </view>
              </view>
              <view class="li">
                <view class="txt">{{$t('专业方向')}}：</view>
                <view class="desc">{{
                  getProffesion(currentInfo.professional)
                }}</view>
              </view>
              <view class="li">
                <view class="txt">{{$t('地区')}}：</view>
                <view class="desc">{{
                  get(currentInfo, "city_arr.shortname")
                }}</view>
              </view>
            </view>
          </view>

          <template v-if="currentInfo.payNoPoint == false">
            <view class="second-confirm">
              <view class="tile">{{$t('账户积分')}}</view>
              <view class="defaul-ti"
                >{{$t('根据您的选择，预计本次将于')}}{{
                  currentInfo.isTotalMimutes
                }}{{$t('分钟后积分消耗完毕，为确保您的翻译客服不被中断，建议您充值足够的积分后再开始邀请翻译客服')}}</view
              >
            </view>
            <view class="btns">
              <view class="btxn" @click="confirmJifen">{{$t('充值积分')}}</view>
              <view class="btxn blue" @click="onVideoCall">{{$t('发起视频通话')}}</view>
            </view>
          </template>

          <template v-else>
            <view class="second-confirm">
              <view class="tile">{{$t('账户积分')}}</view>
              <view class="defaul-ti"
                >{{$t('您的账户的积分低于')}}{{
                  currentInfo.intention_score
                }}{{$t('积分，无法邀请翻译客服，请先充值积分后再邀请翻译客服')}}</view
              >
              <view class="red">{{$t('积分')}}：{{ currentInfo.totalScore }}</view>
            </view>
            <view class="desc-sss">
              {{$t('注：可随时解除翻译人员雇用关系，解除后按已服务的时间收取积分，剩余已付雇用翻译积分将全部原路退还')}}。
            </view>
            <view class="btn" @click="confirmJifen">{{$t('充值积分')}}</view>
          </template>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import CommonHeader from "@/pages/translate/components/common-header.vue";
import Modal from "./components/Modal.vue";

import { crontab_cate } from "@/api/basic.js";

import {
  score_select,
  state_staff,
  state_find,
  state_work,
} from "@/api/state.js";
import { request_minute } from "@/api/basic.js";

import { createNational, isMessageGo, getNational } from "@/utils/tool.js";

export default {
  components: {
    CommonHeader,
    Modal,
  },
  computed: {
    countryImg() {
      return ({ country }) => this.createNational(country).imgurl;
    },
  },
  data() {
    return {
      isShowFilter: false,
      // 语言能力
      lagugeList: [
        {
          title: this.$t('中文'),
          select: false,
          id: this.$t('中'),
        },
        {
          title: this.$t('俄语'),
          id: this.$t('俄'),
        },
        {
          title: this.$t('英语'),
          id: this.$t('英'),
        },
      ],
      jobList: [],
      fullBeginAddressArea: "",
      fullBeginAddressKeyArea: "",
      pointList: [],
      nationalList: getNational(),
      queryForm: {
        lauguge: "",
      },
      isShowPoint: false, // 展示支付

      // 分页相关
      scrollTop: 0,
      isRefresher: false,
      isData: false, // 是否禁用上拉加载
      limit: 100,
      page: 1,
      queryForm: {
        lang: "",
        city_id: "",
        score: "",
        country: "",
        professional_ids: "",
      },

      infoList: [],
      currentJIfen: null,
      currentInfo: {},
    };
  },
  onLoad(options) {
    this.getProfession();
    this.getPoint();
    this.getData();
  },
  methods: {
    createNational,
    getNational,
    // 充值积分
    confirmJifen() {
      this.isShowPoint = false;
      uni.navigateTo({
        url: "/pages/vip/scorePoint",
      });
    },
    // 拨打视频
    onVideoCall() {
      this.isShowPoint = false;
      if (uni.getStorageSync("user_id") == this.currentInfo.user_id) {
        uni.showToast({
          title: this.$t('不能给自己打电话'),
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: this.currentInfo.user_id,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: this.currentInfo.user_id,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.showToast({
              title: this.$t('积分不足，请充值积分'),
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
              });
            }, 500);
          }
        });
      }
    },
    getProffesion(list) {
      let arrName = [];
      list.forEach((ele) => {
        arrName.push(ele.name);
      });

      return arrName.join(",");
    },
    onPrice(index) {
      if (this.currentJIfen == index) {
        this.currentJIfen = null;
        return;
      }
      this.currentJIfen = index;
    },
    // 语言{{$t('筛选')}}
    onLanguge(item) {
      item.select = !item.select;
      this.$forceUpdate();
    },
    onZhuanye(item) {
      item.select = !item.select;
      this.$forceUpdate();
    },
    onContry(item) {
      item.select = !item.select;
      this.$forceUpdate();
    },
    async onTranslate(item) {
      if (!item.status) {
        uni.$u.toast("翻译正忙，请稍后再试");
        return;
      }
      uni.showLoading({
        title: "loading...",
      });
      try {
        let res = await state_find({
          user_id: item.user_id,
        });
        let data = res.data.data.data;
        let rexs = await state_work({
          user_id: uni.getStorageSync("user_id"),
        });
        let score = rexs.data.data.data.member.score;
        data.totalScore = score; // 总积分
        data.payNoPoint = +score < +data.intention_score ? true : false; // true 积分不足
        data.isTotalMimutes = (+score / +data.intention_score).toFixed(0);
        data.avatar = item.avatar;
        this.currentInfo = data;
        uni.hideLoading();
      } catch (error) {
        uni.hideLoading();
      }
      this.isShowPoint = true;
    },
    onClose() {
      this.isShowPoint = false;
    },

    getPoint() {
      score_select().then((res) => {
        this.pointList = res.data.data.data;
      });
    },
    onCHangeHotArea(e) {
      this.fullBeginAddressKeyArea = [
        e.column1.value,
        e.column2.value,
        e.column3.value,
      ].join(",");
      this.fullBeginAddressArea =
        e.column2.value == -1 || e.column3.value == -1
          ? [
              e.column1.label,
              e.column2.label.replace(this.$t('全部'), ""),
              e.column3.label.replace(this.$t('全部'), ""),
            ]
              .filter((item) => item)
              .join(",")
          : e.column3.label;
    },
    getProfession() {
      crontab_cate({
        type: "professional",
      }).then((res) => {
        this.jobList = res.data.data.data;
      });
    },
    onFilter() {
      this.isShowFilter = true;
    },
    submit() {
      this.page = 1;

      let lagugeList = this.lagugeList;
      let langArr = [];
      lagugeList.forEach((ele, index) => {
        if (ele.select) {
          langArr.push(ele.id);
        }
      });

      let jobList = this.jobList;
      let jobArr = [];
      jobList.forEach((ele, index) => {
        if (ele.select) {
          jobArr.push(ele.id);
        }
      });

      let nationalList = this.nationalList;
      let nationalListArr = [];
      nationalList.forEach((ele, index) => {
        if (ele.select) {
          nationalListArr.push(ele.id);
        }
      });

      this.queryForm = {
        lang: langArr.join(","),
        professional_ids: jobArr.join(","),
        city_id: this.fullBeginAddressKeyArea,
        score:
          this.currentJIfen === null ? "" : this.pointList[this.currentJIfen],
        country: nationalListArr.join(","),
      };
      this.isShowFilter = false;
      this.getData();
    },
    // 触底加载
    lower() {
      if (this.isData) return;
      this.page++;
      this.getData();
    },
    // {{$t('下拉刷新')}}触发
    fresh() {
      this.page = 1;
      this.isRefresher = true;
      this.isData = false;
      this.getData();
    },
    // {{$t('下拉刷新')}}复位
    store() {
      this.isRefresher = false;
    },
    // 获取{{$t('列表')}}
    async getData() {
      uni.showLoading({
        title: "loading...",
      });
      try {
        let res = await state_staff({
          page: this.page,
          limit: this.limit,
          user_id: uni.getStorageSync("user_id"),
          ...this.queryForm,
        });
        this.isRefresher = false;
        if (res.data.code == 200) {
          let data = res.data.data.data || [];
          // 分成两列

          if (this.page == 1) {
            this.infoList = data;
          } else {
            this.infoList = [...this.infoList, ...data];
          }
          if (data.length < 10) {
            this.isData = true;
          }
        } else {
          this.isData = true;
        }
        uni.hideLoading({});
      } catch (error) {
        this.isRefresher = false;
        uni.hideLoading({});
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/pages/translate/common/common.scss";
@import "./index.scss";
</style>